<template>
  <div class="info-box">
        <!-- 加入购物车小球 -->
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show="ballShow" ref="ball"></div>
        </transition>
      <!-- 商品轮播图区域 只有body区域-->
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<!-- 轮播图组件的导入 并向子组件轮播图导入数组-->
                         <swiper :lunbotulist="photoList" :isFull="false"></swiper>
					</div>
				</div>
		</div>

        <!-- 商品购买区域 只有页眉和body-->
       	<div class="mui-card">
				<div class="mui-card-header">
                    小米(Mi)Note 16G双网通版
                </div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<div class="price">
                            市场价:<del class="old-price">￥{{goodsInfo.market_price}}</del>&nbsp&nbsp&nbsp销售价:<span class="new-price">￥{{goodsInfo.sell_price}}</span>
                        </div>
                        <div class="number">
                            <!-- 绑定方法和属性方式传最大选择数量和最大库存的传值 -->
                            <p>购买数量:</p><numberMode @sendCount = "getCount" :max= "goodsInfo.stock_quantity"></numberMode>
                        </div>
                        <div>
                            <mt-button size="small" type="primary">立即购买</mt-button>
                            <mt-button size="small" type="danger" @click="showBall">加入购物车</mt-button>
                        </div>
					</div>
				</div>
		</div>

        <!-- 商品参数区域 -->
       	<div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号:{{goodsInfo.goods_no}}</p>
						<p>库存情况: {{goodsInfo.stock_quantity}}件</p>
						<p>上架时间: {{goodsInfo.add_time | dataFormat}}</p>
					</div>
				</div>
			</div> 
        <!-- 按钮区 -->
        <mt-button plain size="large" type="primary" @click="photoIntroduce(id)">图文介绍</mt-button>
        <mt-button plain size="large" type="danger" @click="commentReason(id)">商品评论</mt-button>
  </div>
</template>

<script>
// 引入轮播图组件
import swiper from '../subcomponents/Lunbotu.vue'
// 引入numberBox组件
import numberMode from '../subcomponents/numberMode.vue'
// 添加购物车节流阀设置
let isOver = true;

export default {
     data(){
         return {
             id: this.$route.params.id,
             photoList:[], //轮播图照片存放的数组
             goodsInfo:{}, //获取图片信息详情的数组
             ballShow: false,//小球显示状态
             defaultCount: 1,
         }
     },
     created(){
         this.getLunboPhoto();
         this.getDetail();
     },
     methods:{
         getLunboPhoto(){
             this.$http.get("api/getthumimages/"+this.id).then(result => {
                 if(result.body.status === 0){
                    //  循环轮播图数组的每一项为item添加img属性不认识item.src
                    result.body.message.forEach(item => {
                        item.img = item.src;
                    })
                     this.photoList = result.body.message;
                 }
             });
         },
        //  获取商品详情信息
        getDetail(){
            this.$http.get('api/goods/getinfo/'+this.id).then(result => {
                if(result.body.status === 0){
                    this.goodsInfo = result.body.message[0];
                }
            });
        },
        // 编程式导航跳转图文介绍页面
        photoIntroduce(id){
           this.$router.push({name: "goodsdesc",params: {id}});
        },
        // 编程时导航跳转商品评论界面
        commentReason(id){
         this.$router.push({path: "/home/commentReason/"+this.id})
        },
        // 点击加入购物车显示小球做动画
        showBall(){

            if(isOver){
            //   小球显示
            this.ballShow = !this.ballShow;
            // 设置isover状态取反
            isOver = false;
            setTimeout(function(){
                isOver = true;
            },600);
            }

            // 将当前加入购物车的数据创建成一个对象添加到Vuex中的共享数组中
            var currentShopInfo = {
                id: this.id,   //当前商品的id
                count: this.defaultCount,   //获取当前选中的数量
                price: this.goodsInfo.sell_price,  //后台获取的信息中提取出当前商品的价格
                selected: true,  //第一次加入购物车选中状态
            }
            // 将currentShopInfo添加到vuex仓库中
            this.$store.commit('addCars',currentShopInfo)
        },
        // 小球动画钩子函数
        beforeEnter(el){
            el.style.transform = "translate(0,0)";
        },
        enter(el,done){
            el.offsetWidth;
        //   需要计算小球的坐标位置 和购物车灰标的坐标位置  dom对象.getBoundingClientRect()方法(返回一个矩形对象)来实现根据页面动态添加到购物车
        //  获取dom返回一个对象接收
        // 获取小球在页面中的位置
           const ballPosition = this.$refs.ball.getBoundingClientRect();
        //    获取灰标在页面中的位置
          const badgePosition = document.getElementById("badge").getBoundingClientRect();
        //   变化的横坐标 = 灰标的横坐标-小球的横坐标
          const xDist = badgePosition.left-ballPosition.left;
        // 变化的纵坐标 = 灰标的纵坐标-小球的纵坐标
           const yDist = badgePosition.top-ballPosition.top;
            el.style.transform=`translate(${xDist}px, ${yDist}px)`;
            el.style.transition = 'all 0.5s cubic-bezier(0.4,-0.3, 1, 0.68)'; 
            done();
        },
        afterEnter(el){
            this.ballShow = !this.ballShow;
        },
        // 通过子父传值 绑定的事件设定当前的默认值为1
        getCount(count){
             this.defaultCount = count;
             console.log(this.defaultCount)
        }

     },
     components: {
         swiper,
         numberMode,
     }
}
</script>
<style lang="scss" scoped>
    .number {
        p {
            color: black;
        }
        numberMode{
          display: inline;
        }
    }
   .info-box {
       height: 1000px;
       background: #eee;
       overflow: hidden;
       position: relative;
       .ball {
           width: 16px;
           height: 16px;
           background: red;
           border-radius: 50%;
           position: absolute;
           top: 345px;
           left: 142px;
           z-index: 99;
       }
   }
   .new-price {
       color: red;
       font-weight: bold;
   }
   .old-price {
       color: #ccc;
   }
   .mint-button  {
       margin: 10px 0;
   }
   .number {
       margin: 5px 0;
       overflow: hidden;
       p {
           margin-right: 5px;
           margin-top: 8px;
       }
       p,numberMode {
           float: left;
       }
   }
</style>
